<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            /* 第一种解决方案 */
            /* height: 122px; */

            /* 第二种解决方案 */
            /* float: left; */

            /* 第三种解决方案 */
            /* overflow: hidden; */

        }

        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
        }

        .box1, .box2, .box3, .box4 {
            float: left;
        }

        .mofa {
            /* 第四种解决方案 */
            clear: both;
        }

        /* 第五种解决方案 */
        .outer::after {
            content: "";
            display: block;
            clear: both;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <!-- <div class="mofa"></div> -->
    </div>

    <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio dignissimos optio eveniet corrupti magnam labore, laboriosam nobis facilis a, incidunt nisi rerum, dolor qui enim asperiores non ipsa sapiente sed? Id, ea debitis totam repellendus quidem iusto eos quam hic, ullam doloremque quasi tempora nemo illum nihil harum. Saepe sunt animi ad harum, dolores maiores et! Nobis qui minima fugiat dolorem repellendus quasi eaque reprehenderit omnis magnam sequi a illo provident molestiae labore dolores ratione rerum praesentium atque, accusamus blanditiis? Soluta repudiandae doloribus in praesentium minus, ea animi totam qui pariatur ad ipsa deleniti excepturi earum quae, facilis repellendus delectus?</div>
</body>
</html>